<template>
  <div class="home">
    <home-header :seller="seller" :classMap="classMap" @openDiscount="handleShowDiscount"></home-header>
    <home-discount :seller="seller" :classMap="classMap" v-show="showDscount" @closeDiscount="handleCloseDiscount"></home-discount>
    <div class="tab_nav">
      <router-link class="tab_item" to="/goods">商品</router-link>
      <router-link class="tab_item" to="/star">评价</router-link>
      <router-link class="tab_item" to="/seller">商家</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
import HomeHeader from './header/Header'
import HomeDiscount from './discount/Discount'
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeDiscount
  },
  data () {
    return {
      seller: {},
      classMap: [],
      showDscount: false
    }
  },
  methods: {
    handleShowDiscount () {
      this.showDscount = true
    },
    handleCloseDiscount () {
      this.showDscount = false
    }
  },
  mounted () {
    this.$http.get('/api/seller.json').then((res) => {
      if (res.ok && res.body) {
        res = res.body
        this.seller = res
      }
    })
  },
  created () {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
  }
}
</script>

<style lang="stylus" scoped>
  .tab_nav
    display:flex
    border-bottom: 1px solid rgba(7, 17, 27, .1)
    .tab_item
      flex:1
      font-size:28px
      text-align: center
      line-height: 80px
      color:rgb(77, 85, 93)
    .tab_item.router-link-active
      color:rgb(240, 20, 20)

</style>
